<template>
  <view class="container">
    <img class="" src="http://localhost:9999/videos/vedio.png">
    <view class="title">请按住按钮开始说话</view>

    <view class="mic-area">
      <view
        class="mic-button"
        :class="{ recording: isRecording }"
        @touchstart="startRecord"
        @touchend="stopRecord"
      >
        🎤 按住说话
      </view>
    </view>

    <view class="result-box">
      <text class="result-title">识别结果：</text>
      <text class="result-text">{{ textResult || '（无）' }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 插件调用
const plugin = requirePlugin('WechatSI')
const manager = plugin.getRecordRecognitionManager()

const textResult = ref('')
const isRecording = ref(false)

onMounted(() => {
  manager.onRecognize = (res) => {
    console.log('中间结果：', res.result)
    // 可选：实时显示中间识别结果
    // textResult.value = res.result
  }

  manager.onStop = (res) => {
    console.log('最终结果：', res.result)
    if (res.result) {
      textResult.value = res.result
    } else {
      textResult.value = '未识别到语音，请重试'
    }
  }

  manager.onError = (err) => {
    console.error('识别出错', err)
    textResult.value = '识别出错，请重试'
    isRecording.value = false
  }
})

const startRecord = () => {
  isRecording.value = true
  textResult.value = ''
  manager.start({ lang: 'zh_CN' })
}

const stopRecord = () => {
  isRecording.value = false
  manager.stop()
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

.title {
  font-size: 32rpx;
  margin-bottom: 60rpx;
  color: #333;
}

.mic-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80rpx;
}

.mic-button {
  background-color: #409eff;
  color: #fff;
  font-size: 36rpx;
  text-align: center;
  padding: 30rpx 80rpx;
  border-radius: 100rpx;
  transition: background-color 0.3s;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
  user-select: none;
}

.mic-button.recording {
  background-color: #f56c6c;
}

.result-box {
  width: 100%;
  background-color: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.1);
}

.result-title {
  font-weight: bold;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  display: block;
  color: #666;
}

.result-text {
  font-size: 32rpx;
  color: #000;
  line-height: 1.6;
}
</style>